@keyframes fadeIn {
  from {
    opacity: 0;       
  }
  to {
    opacity: 1;      
  }
}

.bg{
  position:absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background:rgba(0,0,0,0.7) ;
  animation: fadeIn 0.6s ease-out forwards; 
}

.erase1{
  position:absolute;
  top:57%;
  left:50%;
  transform: translate(-50%,-50%);
  width: 56%;
  height: 21%;
  background:#fdfef9;
}

.popup_img{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 43%;
}

.box{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  height: 40%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.name{
  position: absolute;
  top:42%;
  font-size:15px;

}

.distant_font{
  position: absolute;
  top:51%;
  color:#85b5f8;
  font-size:13px;

}

.information{
  position: absolute;
  top:61%;
  font-size:18px;
  font-weight:bold;
}

.ack_btn{
  position: absolute;
  top:77%;
  width: 33%;
  height: 12%;
  background-color:#81b3f8;
  color:#f9fcfe;
  font-weight: 100;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size:15px;
}

.close_btn{
  position: absolute;
  right: 16%;
  top:22%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 100;
  background:transparent;
  color:#a6a6a6;
}

.erase2{
  position: absolute;
  right: 15%;
  top:39.5%;
  width: 5vw;
  height: 5vw;
  background:#fdedf2;
}

.erase3{
  position: absolute;
  right: 1%;
  top:69%;
  width: 10vw;
  height: 5vw;
  background:#47484c;
}

.Hi{
  position: absolute;
  top:31.5%;
  left:53%;
  color:white;
  font-size:22px;
  font-weight: bold;
  transform: skew(-10deg, 10deg);
}

